<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蛋仔排队小游戏</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="game-container">
        <header class="game-header">
            <h1 class="game-title">🥚 蛋仔排队 🥚</h1>
            <div class="game-info">
                <div class="score">分数: <span id="score">0</span></div>
                <div class="level">关卡: <span id="level">1</span></div>
                <div class="timer">时间: <span id="timer">60</span>秒</div>
            </div>
        </header>

        <main class="game-main">
            <section class="queue-area">
                <h2>排队区域</h2>
                <div id="queue" class="queue-container">
                    <!-- 蛋仔将在这里排队 -->
                </div>
                <div class="queue-counter">
                    队列人数: <span id="queue-count">0</span>/10
                </div>
            </section>

            <section class="control-area">
                <h2>控制面板</h2>
                <div class="spawn-controls">
                    <button id="add-egg" class="btn btn-primary">添加蛋仔</button>
                    <button id="remove-egg" class="btn btn-secondary">移除蛋仔</button>
                    <button id="clear-queue" class="btn btn-danger">清空队列</button>
                </div>
                
                <div class="egg-types">
                    <h3>选择蛋仔类型:</h3>
                    <div class="egg-type-selector">
                        <label><input type="radio" name="egg-type" value="normal" checked> 普通蛋仔</label>
                        <label><input type="radio" name="egg-type" value="golden"> 黄金蛋仔</label>
                        <label><input type="radio" name="egg-type" value="rainbow"> 彩虹蛋仔</label>
                    </div>
                </div>
            </section>

            <section class="preview-area">
                <h2>预览区域</h2>
                <div id="preview" class="preview-container">
                    <div class="preview-egg">🥚</div>
                </div>
            </section>
        </main>

        <footer class="game-footer">
            <div class="game-controls">
                <button id="start-game" class="btn btn-success">开始游戏</button>
                <button id="pause-game" class="btn btn-warning" disabled>暂停游戏</button>
                <button id="reset-game" class="btn btn-info">重置游戏</button>
            </div>
        </footer>
    </div>

    <div id="game-over-modal" class="modal hidden">
        <div class="modal-content">
            <h2>游戏结束！</h2>
            <p>最终分数: <span id="final-score">0</span></p>
            <p>完成关卡: <span id="final-level">1</span></p>
            <button id="restart-btn" class="btn btn-primary">重新开始</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>